<template>
    <div id="loop-pie" ref="canvas" class="loop-pie" :style="{width: '100%', height: canHeight + 'vh'}"></div>
</template>

<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })
onMounted(() => {
    var chartDom = document.getElementById('loop-pie')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        title: {
            show: false,
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        grid: {
            top: 50,
            left: 20,
            right: 0,
            bottom: 20,
            containLabel: true
        },
        legend: {
            bottom: 0,
            left: 'center',
            itemWidth: 15,
            itemHeight: 10,
            textStyle: {color: '#fff'},
        },
        series: [
            {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            data: props.data.seriesDataList || [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
                itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
            }
        ]
    };

    option && myChart.setOption(option);

})
</script>

<style scope>
</style>
